import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/lib/form';

import { Card, Col, Descriptions } from 'antd';

import '@ant-design/compatible/assets/index.css';
import { CabinetPlansItem } from './data';

const { Item } = Descriptions;

interface CabinetPlansDetailProps extends FormComponentProps {
  dispatch: Dispatch;
  detailInfo: CabinetPlansItem;
  location: {query: any;};
}

@connect(({ cabinetPlansDetail: { detailInfo } }: any) => ({ detailInfo }))

class CabinetPlansDetailElem extends Component<CabinetPlansDetailProps> {
  componentDidMount() {
    const { location: { query: { id } } } = this.props;
    this.fetchDetailInfo(id);
  }

  componentDidUpdate(prevProps: any) {
    const { location: { query: { id } } } = this.props;
    if (prevProps.location.query.id !== id) {
      this.fetchDetailInfo(id);
    }
  }

  fetchDetailInfo = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cabinetPlansDetail/fetch',
      payload: { id },
    });
  }

  render() {
    const { detailInfo } = this.props;

    return (
      <Fragment>
        <PageHeader />

        <Card title="基本信息" bordered={false}>
          <Descriptions bordered size="small">
            <Item label="套餐名称">{detailInfo.name}</Item>
            <Item label="状态">{detailInfo.valid ? '有效' : '无效' }</Item>
          </Descriptions>
        </Card>

        <Card title="投递费用" bordered={false}>
          <Col span={24}>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="　　　大箱">{detailInfo.useP10901} 分</Item>
              <Item label="　　　中箱">{detailInfo.useP10902} 分</Item>
              <Item label="　　　小箱">{detailInfo.useP10903} 分</Item>
              <Item label="　　超小箱">{detailInfo.useP10904} 分</Item>
              <Item label="　大箱(宽)">{detailInfo.useP10905} 分</Item>
              <Item label="　中箱(宽)">{detailInfo.useP10906} 分</Item>
              <Item label="　小箱(宽)">{detailInfo.useP10907} 分</Item>
              <Item label="超小箱(宽)">{detailInfo.useP10908} 分</Item>
              <Item label="　　文件箱">{detailInfo.useP10909} 分</Item>
              <Item label="文件箱(宽)">{detailInfo.useP10910} 分</Item>
              <Item label="　　超大箱">{detailInfo.useP10911} 分</Item>
              <Item label="超大箱(宽)">{detailInfo.useP10912} 分</Item>
            </Descriptions>
          </Col>
        </Card>

        <Card title="用户取件费用" bordered={false}>
          <Col span={24}>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="　　　大箱">{detailInfo.userUseP10901} 分</Item>
              <Item label="　　　中箱">{detailInfo.userUseP10902} 分</Item>
              <Item label="　　　小箱">{detailInfo.userUseP10903} 分</Item>
              <Item label="　　超小箱">{detailInfo.userUseP10904} 分</Item>
              <Item label="　大箱(宽)">{detailInfo.userUseP10905} 分</Item>
              <Item label="　中箱(宽)">{detailInfo.userUseP10906} 分</Item>
              <Item label="　小箱(宽)">{detailInfo.userUseP10907} 分</Item>
              <Item label="超小箱(宽)">{detailInfo.userUseP10908} 分</Item>
              <Item label="　　文件箱">{detailInfo.userUseP10909} 分</Item>
              <Item label="文件箱(宽)">{detailInfo.userUseP10910} 分</Item>
              <Item label="　　超大箱">{detailInfo.userUseP10911} 分</Item>
              <Item label="超大箱(宽)">{detailInfo.userUseP10912} 分</Item>
            </Descriptions>
          </Col>
        </Card>

        <Card title="用户取件超时配置" bordered={false}>
          <Col span={24} className="marginB12">
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="　　　大箱">{detailInfo.overtimeP10901} 分</Item>
              <Item label="　　　中箱">{detailInfo.overtimeP10902} 分</Item>
              <Item label="　　　小箱">{detailInfo.overtimeP10903} 分</Item>
              <Item label="　　超小箱">{detailInfo.overtimeP10904} 分</Item>
              <Item label="　大箱(宽)">{detailInfo.overtimeP10905} 分</Item>
              <Item label="　中箱(宽)">{detailInfo.overtimeP10906} 分</Item>
              <Item label="　小箱(宽)">{detailInfo.overtimeP10907} 分</Item>
              <Item label="超小箱(宽)">{detailInfo.overtimeP10908} 分</Item>
              <Item label="　　文件箱">{detailInfo.overtimeP10909} 分</Item>
              <Item label="文件箱(宽)">{detailInfo.overtimeP10910} 分</Item>
              <Item label="　　超大箱">{detailInfo.overtimeP10911} 分</Item>
              <Item label="超大箱(宽)">{detailInfo.overtimeP10912} 分</Item>
            </Descriptions>
          </Col>
          <Col span={24}>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="免费时间">{detailInfo.normalTime} 小时</Item>
              <Item label="间隔时间">{detailInfo.overtime} 小时</Item>
            </Descriptions>
          </Col>
        </Card>

        <Card title="快递员取回超时配置" bordered={false}>
          <Col span={24} className="marginB12">
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="　　　大箱">{detailInfo.detentionP10901} 分</Item>
              <Item label="　　　中箱">{detailInfo.detentionP10902} 分</Item>
              <Item label="　　　小箱">{detailInfo.detentionP10903} 分</Item>
              <Item label="　　超小箱">{detailInfo.detentionP10904} 分</Item>
              <Item label="　大箱(宽)">{detailInfo.detentionP10905} 分</Item>
              <Item label="　中箱(宽)">{detailInfo.detentionP10906} 分</Item>
              <Item label="　小箱(宽)">{detailInfo.detentionP10907} 分</Item>
              <Item label="超小箱(宽)">{detailInfo.detentionP10908} 分</Item>
              <Item label="　　文件箱">{detailInfo.detentionP10909} 分</Item>
              <Item label="文件箱(宽)">{detailInfo.detentionP10910} 分</Item>
              <Item label="　　超大箱">{detailInfo.detentionP10911} 分</Item>
              <Item label="超大箱(宽)">{detailInfo.detentionP10912} 分</Item>
            </Descriptions>
          </Col>
          <Col span={24}>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="免费时间">{detailInfo.detentionNormalTime} 小时</Item>
              <Item label="间隔时间">{detailInfo.detentionOvertime} 小时</Item>
            </Descriptions>
          </Col>
        </Card>

        <Card title="柜体寄存费用" bordered={false}>
          <Col span={24} className="marginB12">
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="　　　大箱">{detailInfo.depositP10901} 分</Item>
              <Item label="　　　中箱">{detailInfo.depositP10902} 分</Item>
              <Item label="　　　小箱">{detailInfo.depositP10903} 分</Item>
              <Item label="　　超小箱">{detailInfo.depositP10904} 分</Item>
              <Item label="　大箱(宽)">{detailInfo.depositP10905} 分</Item>
              <Item label="　中箱(宽)">{detailInfo.depositP10906} 分</Item>
              <Item label="　小箱(宽)">{detailInfo.depositP10907} 分</Item>
              <Item label="超小箱(宽)">{detailInfo.depositP10908} 分</Item>
              <Item label="　　文件箱">{detailInfo.depositP10909} 分</Item>
              <Item label="文件箱(宽)">{detailInfo.depositP10910} 分</Item>
              <Item label="　　超大箱">{detailInfo.depositP10911} 分</Item>
              <Item label="超大箱(宽)">{detailInfo.depositP10912} 分</Item>
            </Descriptions>
          </Col>
          <Col span={24}>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="免费时间">{detailInfo.depositFreeHours} 小时</Item>
              <Item label="间隔时间">{detailInfo.depositIntervalHours} 小时</Item>
              <Item label="最高上限金额">{detailInfo.depositMaxFee} 分</Item>
            </Descriptions>
          </Col>
        </Card>

        <Card title="货架取件超时配置" bordered={false}>
          <Descriptions bordered size="small">
            <Item label="收费价格">{detailInfo.shelfCharge} 分</Item>
            <Item label="免费时间">{detailInfo.shelfNormalTime} 小时</Item>
            <Item label="间隔收费">{detailInfo.shelfTimeout} 小时</Item>
          </Descriptions>
        </Card>

        <Card title="地堆取件超时配置" bordered={false}>
          <Descriptions bordered size="small">
            <Item label="收费价格">{detailInfo.tempCharge} 分</Item>
            <Item label="免费时间">{detailInfo.tempNormalTime} 小时</Item>
            <Item label="间隔收费">{detailInfo.tempTimeout} 小时</Item>
          </Descriptions>
        </Card>

        <Card title="折扣配置" bordered={false}>
          <Col span={24} className="marginB24">
            <div className="subtitle marginB10">用户取件折扣</div>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="APP取件折扣">{detailInfo.appPickupDiscount} %</Item>
              <Item label="柜体取件折扣">{detailInfo.cabPickupDiscount} %</Item>
              <Item label="码枪取件折扣">{detailInfo.scanPickupDiscount} %</Item>
              <Item label="后台取件折扣">{detailInfo.innerPickupDiscount} %</Item>
            </Descriptions>
          </Col>
          <Col span={24} className="marginB24">
            <div className="subtitle marginB10">投递人投递折扣</div>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="柜体投递收费折扣">{detailInfo.cabDeliveryDiscount} %</Item>
              <Item label="APP投递收费折扣">{detailInfo.appDeliveryDiscount} %</Item>
            </Descriptions>
          </Col>
          <Col span={24}>
            <div className="subtitle marginB10">投递人取回折扣</div>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="柜体取回收费折扣">{detailInfo.cabRetrieveDiscount} %</Item>
              <Item label="APP取回收费折扣">{detailInfo.appRetrieveDiscount} %</Item>
            </Descriptions>
          </Col>
        </Card>

        <Card title="免密支付折扣" bordered={false}>
          <Descriptions>
            <Item label="免密支付折扣">{detailInfo.cabFreePayDiscount} %</Item>
          </Descriptions>
        </Card>
        <Card bordered={false} title="信报投递价格" />

        <Card title="格口积分配置" bordered={false}>
          <Col span={24}>
            <Descriptions bordered size="small" column={{ xs: 2, md: 4 }}>
              <Item label="　　　大箱">{detailInfo.creditP10901} 分</Item>
              <Item label="　　　中箱">{detailInfo.creditP10902} 分</Item>
              <Item label="　　　小箱">{detailInfo.creditP10903} 分</Item>
              <Item label="　　超小箱">{detailInfo.creditP10904} 分</Item>
              <Item label="　大箱(宽)">{detailInfo.creditP10905} 分</Item>
              <Item label="　中箱(宽)">{detailInfo.creditP10906} 分</Item>
              <Item label="　小箱(宽)">{detailInfo.creditP10907} 分</Item>
              <Item label="超小箱(宽)">{detailInfo.creditP10908} 分</Item>
              <Item label="　　文件箱">{detailInfo.creditP10909} 分</Item>
              <Item label="文件箱(宽)">{detailInfo.creditP10910} 分</Item>
              <Item label="　　超大箱">{detailInfo.creditP10911} 分</Item>
              <Item label="超大箱(宽)">{detailInfo.creditP10912} 分</Item>
            </Descriptions>
          </Col>
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<CabinetPlansDetailProps>()(CabinetPlansDetailElem);
